feat: Implement enhancements for new design #192
Conversation
A line-clamp is more flexible for different device types and always clamps to three lines. This makes better use of the available space.
✅ Deploy Preview for fipguide ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| margin-bottom: 2rem; | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| gap: 2rem; | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } |
There was a problem hiding this comment.
What added value does it have compared to Bootstrap?
There was a problem hiding this comment.
I see a few advantages:
- Reduced bundle size when removing Bootstrap completely, initially discussed here: Check necessity of bootstrap #74 (comment). If we still want to get rid of Bootstrap, I'd slowly decrease the dependency and at least leave it out from newly introduced code.
- Native DevTools support. Chrome and Firefox have some neat development tools around grid layout. The devtools didn't work with the bootstrap grid layout.
- Less chance of breaking changes. Bootstrap is under active development and can introduce breaking changes. CSS itself is considered as rather stable.
There was a problem hiding this comment.
According to my understanding, the discussion is about using bootstrap not as an depency, but as local css rules. If you want to remove bootstrap in total, we should do this in a separate branch and not accorded to this feature branch. There are many more occurencies, which have to be replaced either.
There was a problem hiding this comment.
I just thought that it makes sense to avoid Bootstrap for newly added content to reduce effort for the migration. But since I've done it in a separate commit anyway, I'll take it out and move it into a separate PR.
assets/sass/styles.scss
Outdated
| .o-startpage__shortcut-wrapper { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr 1fr 3fr; | ||
| gap: 2rem; | ||
| margin-bottom: 2rem; | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .o-startpage__search { | ||
| margin-bottom: 2rem; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .o-startpage__news-teaser-wrapper { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr 1fr; | ||
| gap: 2rem; | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } |
There was a problem hiding this comment.
What added value does it have compared to Bootstrap?
There was a problem hiding this comment.
Some as here: #192 (comment)
| object-fit: cover; | ||
| height: 100%; |
There was a problem hiding this comment.
in my opinion, we should show the images always in aspect-ratio 16/9. Don't you think so?
There was a problem hiding this comment.
I disagree here :)
Let's have a look at the news list with a viewport that has a width of 850px.
This is the previous version:
I can see mainly two issues here:
- The images have a small white line at the bottom because they can't fit properly.
- The text preview is very limited.
Number 1 is probably easily fixable. Number 2 is more challenging: When I increase the preview lines, the height increases. When we would preserve the image ratio now, the width would also increase and takes away the space that I would use for the content preview.
In the updated version, I have three preview lines. The aspect ratio is not 16:9 anymore, but because of the CSS object-fitting, it just zooms in slightly. Still looks good in my opinion.
There was a problem hiding this comment.
These are two separate aspects of it:
- Using 16/9 aspect ratio
- Prevention of whitespace
Do you think, there is no way / no need to keep 16/9? Otherwise we lose control over the shown part of the image :)
There was a problem hiding this comment.
I don't think that there is a necessity to have an image ratio of 16/9. I would rather formulate the requirement as "The images should be displayed in a 16/9 ratio", so try to make it work where it works out. Most of the images don't depend on a specific parts of the image.
I believe we're talking about a user group of less than 5% anyway (only users with a screen width between 768px and 992px see the images in a another screen ratio than 16/9). For those users, we have one of the following options:
- Only show a part of the image like it's the case in my proposal.
- Don't show the image at all for the specific screen width range.
- Reduce the text to display (not three lines, but make an exception for the specific screen width range) like it's the case in your proposal, but would need some refinement to avoid the white space.
What do you think about the proposal to keep number 1, but take it as discussion point to the next meeting. Then we can also hear the other opinions and come to a conclusion. I'd also implement whatever we decide on.
I tried to split the different parts into different commits, so that we can easily take out some individual parts.